<template>
  <view class="container" v-if="detail">
    <view class="order-status">
      <!-- 订单状态：orderStatus 0-待付款；1-待发货；2-已发货；3-已完成；4-已关闭； -->
      <block v-if="detail.orderStatus === 0">
        <view class="_title">
          <x-icon name="icon-051" size="40" color="#FFFFFF" style="margin-right: 8rpx;font-weight:normal"/>
          订单待支付
        </view>
        <view class="cutdown">
          <text class="_title">还剩</text>
          <x-countdown :end="detail.endPayTime" auto @finish="onTimeFinish" @change="handleCountdownChangePayTime">
            <template v-if="countdownPayTime">
              <view class="_time">
                <view class="_clock">{{ countdownPayTime.hour }}</view>
                <text class="_symbol">:</text>
                <view class="_clock">{{ countdownPayTime.minute }}</view>
                <text class="_symbol">:</text>
                <view class="_clock">{{ countdownPayTime.second }}</view>
              </view>
            </template>
          </x-countdown>
          <text class="_title">自动取消订单</text>
        </view>
        <view class="_img">
          <x-image :src="ToPay"/>
        </view>
      </block>
      <block v-if="detail.orderStatus === 1">
        <view class="_title">
          <x-icon name="icon-051" size="40" color="#FFFFFF" style="margin-right: 8rpx;font-weight:normal"/>
          待商家发货
        </view>
        <!--  订单类型：orderType 1-普通订单；2-拼团订单  -->
        <view class="cutdown">
          <text class="_title">商家备货中</text>
        </view>
        <view class="_img">
          <x-image :src="ToGrouped"/>
        </view>
      </block>
      <block v-if="detail.orderStatus === 2">
        <view class="_title">
          <x-icon name="icon-051" size="40" color="#FFFFFF" style="margin-right: 8rpx;font-weight:normal"/>
          商家已发货
        </view>
        <view class="cutdown">
          <text class="_title">
            商家已发货，还剩
          </text>
          <x-countdown :time="(detail.autoReceivedHours * 60 * 60 * 1000)" auto @finish="onTimeFinish"
                       @change="handleCountdownChangeReceivedHours">
            <template v-if="countdownReceivedHours">
              <view class="_time">
                {{ countdownReceivedHours.day }}天{{ countdownReceivedHours.hour }}时
              </view>
            </template>
          </x-countdown>
          <text class="_title">自动确认</text>
          <view class="_img">
            <x-image :src="Shipped"/>
          </view>
        </view>
      </block>
      <block v-if="detail.orderStatus === 3">
        <view class="_title">
          <x-icon name="icon-042" size="40" color="#FFFFFF" style="margin-right: 8rpx;font-weight:normal"/>
          交易成功
        </view>
        <view class="cutdown">
          <text class="_title" v-if="detail.commentStatus === 0">写评价分享你的购物心情吧</text>
          <text class="_title" v-else>感谢您的购买，欢迎您再次光临~</text>
          <view class="_img">
            <x-image :src="OrderSuccess"/>
          </view>
        </view>
      </block>
      <block v-if="detail.orderStatus === 4">
        <view class="_title">
          <x-icon name="icon-044" size="40" color="#FFFFFF" style="margin-right: 8rpx;font-weight:normal"/>
          交易关闭
          <!-- 关闭状态：0-正常；1-买家取消订单；2-商家关闭订单；3-维权结束；4-买家超时未支付；5-商家主动退款 -->
          <text class="_order-tips" v-if="detail.closeStatus === 1">(买家取消)</text>
          <text class="_order-tips" v-if="detail.closeStatus === 2">(商家关闭)</text>
          <text class="_order-tips" v-if="detail.closeStatus === 3">(退款成功)</text>
          <text class="_order-tips" v-if="detail.closeStatus === 4">(超时未付款)</text>
          <text class="_order-tips" v-if="detail.closeStatus === 5">(商家主动退款)</text>
        </view>
        <view class="cutdown">
          <text class="_title">再逛逛，下一件一定是有缘分的宝贝~</text>
          <view class="_img">
            <x-image :src="OrderClose"/>
          </view>
        </view>
      </block>
    </view>

    <!--  收货地址  -->
    <view>
      <view class="address flex">
        <view class="_lf">
          <view class="_img">
            <x-icon name="icon-021" size="36" color="#999999"/>
          </view>
        </view>
        <view class="flex1">
          <view>
            <view class="flex _user-info align-center">
              <text class="flex1">{{ detail.username }}</text>
              <text class="_text">{{ detail.phoneNum }}</text>
            </view>
            <view class="address-info">
              {{ detail.userProvince }}{{ detail.userCity }}{{ detail.userArea }}{{ detail.userAddress }}
            </view>
          </view>
        </view>
      </view>
      <view style="height: 2px">
        <x-image :src="CommonAddress"/>
      </view>
    </view>

    <!--  店铺信息/商品信息  -->
    <view class="goods-info">
      <goods-info :detail="detail"/>
    </view>

    <view class="refund" v-if="detail.orderStatus === 6">
      <!-- 退款状态：0-正常订单；1-退款中；2-退款关闭；3-售后申请时间已过 -->
      <view class="_btn">
        <x-button plain :type="refundText === '退款中' ? '' : 'default'" @click="onRefund(detail.orderId)">{{
            refundText
          }}
        </x-button>
      </view>
    </view>

    <!-- 联系商家/官方客服 -->
    <view class="service-subsidy">
      <view class="service" v-if="storeInfo">
        <view class="_item">
          <x-button
              styles="border: none !important;color: #323233;height: 120rpx;line-height:1"
              size="large"
              plain
              open-type="contact"
              :businessId="storeInfo.businessId"
              :show-message-card="true"
              @click="onCustomer(storeInfo.businessId)"
          >
            <view class="_btn">
              <view class="_icon">
                <x-icon name="icon-001" size="44" color="#646464"/>
              </view>
              <view class="_top">
                <text style="color: #323233;font-size: 30rpx;">联系商家</text>
                <view class="_title">物流/售后咨询</view>
              </view>
            </view>
          </x-button>
        </view>
        <view class="line"></view>
        <view class="_item">
          <x-button
              businessId="1"
              open-type="contact"
              styles="border: none !important;color: #323233;height: 120rpx;line-height:1"
              size="large"
              plain
              @click="onCustomer(1)"
          >
            <view class="_btn">
              <view class="_icon">
                <x-icon name="icon-054" size="44" color="#646464"/>
              </view>
              <view class="_top">
                <text style="color: #323233;font-size: 30rpx;">官方客服</text>
                <view class="_title">其他问题/纠纷</view>
              </view>
            </view>
          </x-button>
        </view>
      </view>
    </view>

    <view class="reduc">
      <view class="_title">
        <text class="flex1">商品总额</text>
        <text>¥{{ detail.actualPrice }}</text>
      </view>
      <view class="_title">
        <text class="flex1">运费</text>
        <text class="_red">免运费</text>
      </view>
    </view>
    <view class="total">
      <text class="pay">
        <text style="margin-right: 2rpx;">{{ detail.payNo ? '实付款：' : '需付款:' }}</text>
        <text class="_red font-32 blod">
          <text class="font-24">¥</text>
          {{ detail.closeStatus !== 4 ? detail.actualPrice : 0 }}
        </text>
      </text>
    </view>
    <view class="order">
      <view class="_title">
        <text class="_text">订单编号</text>
        <text user-select>{{ detail.orderNo }}</text>
      </view>
      <view class="_title">
        <text class="_text">下单时间</text>
        <text>{{ detail.createdTime }}</text>
      </view>
      <view class="_title">
        <text class="_text">支付时间</text>
        <text>{{ detail.payTime ? detail.payTime : '-' }}</text>
      </view>
      <view class="_title">
        <text class="_text">付款方式</text>
        <!-- 支付类型：1-微信支付 -->
        <text>{{ detail.payType === 1 ? '微信支付' : '-' }}</text>
      </view>
      <view class="_title">
        <text class="_text">留言</text>
        <text>{{ detail.userMessage ? detail.userMessage : '-' }}</text>
      </view>
    </view>
    <x-fixed ref="x-fixed-bottom" fixed direction="bottom">
      <view>
        <!-- 订单状态：0-待付款；1-待发货；2-已发货；3-已完成；4-已关闭； -->
        <view class="bottom" v-if="detail.orderStatus === 0">
          <view class="_btn">
            <x-button plain type="default" @click="changeAddress">修改地址</x-button>
          </view>
          <view class="_btn">
            <x-button plain type="default" @click="cancelOrder">取消订单</x-button>
          </view>
          <view class="_btn">
            <x-button @click="payOrder">立即支付</x-button>
          </view>
        </view>
        <view class="bottom" v-if="detail.orderStatus === 1">
          <view class="_btn" v-if="detail.canComplaint && !isGetUserProfile">
            <x-button @click="getUserProfile(false)" plain type='default'>交易投诉</x-button>
          </view>
          <view class="_btn" v-if="detail.canComplaint && isGetUserProfile">
            <x-button :open-type="!isGetPhoneNumber ? 'getPhoneNumber' : ''" @getAuthorize="getAuthorize"
                      @click="onFeedBack" plain type='default'>交易投诉
            </x-button>
          </view>
          <view class="_btn">
            <x-button @click="onAgainBuy">再来一单</x-button>
          </view>
        </view>
        <view class="bottom" v-if="detail.orderStatus === 2">
          <view class="_btn" v-if="detail.canComplaint && !isGetUserProfile">
            <x-button @click="getUserProfile(false)" plain type='default'>交易投诉</x-button>
          </view>
          <view class="_btn" v-if="detail.canComplaint && isGetUserProfile">
            <x-button :open-type="!isGetPhoneNumber ? 'getPhoneNumber' : ''" @getAuthorize="getAuthorize"
                      @click="onFeedBack" plain type='default'>交易投诉
            </x-button>
          </view>
          <view class="_btn">
            <x-button plain type="default" @click="onAgainBuy">再来一单</x-button>
          </view>
          <view class="_btn">
            <x-button plain type="default" @click="onLogistics">查看物流</x-button>
          </view>
          <view class="_btn" v-if="(detail.closeStatus !== 6 && detail.fundType !== 1)">
            <x-button @click="onReceived">确认收货</x-button>
          </view>
        </view>
        <view class="bottom" v-if="detail.orderStatus === 3">
          <view class="_btn" v-if="detail.canComplaint && !isGetUserProfile">
            <x-button @click="getUserProfile(false)" plain type='default'>交易投诉</x-button>
          </view>
          <view class="_btn" v-if="detail.canComplaint && isGetUserProfile">
            <x-button :open-type="!isGetPhoneNumber ? 'getPhoneNumber' : ''" @getAuthorize="getAuthorize"
                      @click="onFeedBack" plain type='default'>交易投诉
            </x-button>
          </view>
          <view class="_btn">
            <x-button plain type="default" @click="onLogistics">查看物流</x-button>
          </view>
          <view class="_btn">
            <x-button plain type="default" @click="onAgainBuy">再来一单</x-button>
          </view>
          <view class="_btn" v-if="detail.commentStatus === 0">
            <x-button @click="handleChangeComment">评价晒单</x-button>
          </view>
        </view>
        <view class="bottom" v-if="detail.orderStatus === 4">
          <view class="_btn" v-if="detail.canComplaint && !isGetUserProfile">
            <x-button @click="getUserProfile(false)" plain type='default'>交易投诉</x-button>
          </view>
          <view class="_btn" v-if="detail.canComplaint && isGetUserProfile">
            <x-button :open-type="!isGetPhoneNumber ? 'getPhoneNumber' : ''" @getAuthorize="getAuthorize"
                      @click="onFeedBack" plain type='default'>交易投诉
            </x-button>
          </view>
          <view class="_btn" v-if="detail.expressNo">
            <x-button plain type="default" @click="onLogistics">查看物流</x-button>
          </view>
          <view class="_btn">
            <x-button @click="onAgainBuy">再来一单</x-button>
          </view>
        </view>
      </view>
    </x-fixed>
  </view>
</template>

<script setup>
import XFixed from '@/components/x-fixed.vue';
import XImage from '@/components/x-image.vue';
import XIcon from '@/components/x-icon.vue';
import XButton from '@/components/x-button.vue';
import XCountdown from '@/components/x-countdown.vue';
import GoodsInfo from './components/goods-info.vue'
import ToPay from '@/assets/images/to-pay.png'
import ToGrouped from '@/assets/images/to-grouped.png'
import Shipped from '@/assets/images/shipped.png'
import OrderSuccess from '@/assets/images/order-success.png'
import OrderClose from '@/assets/images/order-close.png'
import CommonAddress from '@/assets/images/common-address.png'
import {onLoad} from "@dcloudio/uni-app";
import {reqOrderDetail} from "@/api";
import {ref} from "vue";

const detail = ref({})
const storeInfo = ref({})

function onCustomer(item) {

}

function onAgainBuy() {
}

async function getOrderDetail(orderId) {
  const resp = await reqOrderDetail({orderId})
  detail.value = resp.data
}

onLoad((options) => {
  getOrderDetail(options.id)
})
</script>

<style lang="scss" scoped>
.container {
  background-color: #eeeeee;
  padding-bottom: 20rpx;

  .order-status {
    position: relative;
    min-height: 160rpx;
    background: $uni-color-primary;
    padding: 36rpx 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    ._title {
      display: flex;
      align-items: center;
      color: #FFFFFF;
      font-size: 38rpx;
      font-weight: bold;

      ._order-tips {
        margin-left: 8rpx;
        font-size: 28rpx;
        font-weight: normal;
      }
    }

    .cutdown {
      display: flex;
      align-items: center;
      margin-top: 12rpx;

      ._time {
        margin: 0 16rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #FFE457;

        ._clock {
          width: 40rpx;
          height: 40rpx;
          background: #FFFFFF;
          border-radius: 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $uni-color-primary;
          font-size: 24rpx;
        }

        ._symbol {
          margin: 0 8rpx;
          color: #FFFFFF;
          font-size: 24rpx
        }
      }

      ._title {
        color: #FFFFFF;
        font-size: 28rpx;
        font-weight: normal;
      }

      .group-count {
        color: #FFFFFF;
        font-size: 24rpx;
        //display: flex;
        //align-items: center;
        //justify-content: center;
        display: block;
        border: 1rpx solid #FFF;
        border-radius: 100rpx;
        line-height: 36rpx;
        overflow: hidden;

        ._text {
          padding: 12rpx 20rpx;
        }

        ._title_lf {
          padding: 12rpx 20rpx;
          width: 50%;
        }

        ._title_rt {
          padding: 12rpx 20rpx;
          width: 50%;
          background: #FFFFFF;
          color: $uni-color-primary;
        }
      }
    }

    ._img {
      width: 198rpx;
      height: 120rpx;
      position: absolute;
      bottom: 0;
      right: 28rpx;
    }
  }

  .address {
    padding: 32rpx 32rpx 32rpx 24rpx;
    background: #FFFFFF;
    align-items: center;
    margin-top: 16rpx;
    background-image: cdn('/images/address-bottom.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;

    ._lf {
      margin-right: 16rpx;

      ._img {
        width: 36rpx;
        height: 36rpx;
      }
    }

    ._user-info {
      font-size: 32rpx;
      color: $uni-color-default;
      font-weight: bold;

      ._text {
        font-size: 28rpx;
      }
    }

    .add-address {
      font-size: 28rpx;
      color: $uni-color-default;
    }

    .address-info {
      font-size: 28rpx;
      color: $uni-color-info;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: justify;
      margin-top: 8rpx;
    }
  }

  .reduc {
    display: flex;
    flex: 1;
    padding: 0 24rpx;
    flex-direction: column;
    background: #FFFFFF;

    ._title {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: $uni-color-default;
    }

    ._title:first-child {
      padding-top: 40rpx;
    }

    ._title:last-child {
      padding-bottom: 40rpx;
    }
  }

  .total {
    border-top: 2rpx solid #F5F5F5;
    padding: 16rpx 24rpx;
    text-align: right;
    font-size: 28rpx;
    color: $uni-color-info;
    background: #FFFFFF;

    .pay {
      color: $uni-color-default;
    }
  }

  .refund {
    border-top: 2rpx solid #F5F5F5;
    padding: 16rpx 24rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: flex-end;

    ._btn {
      width: 172rpx;
    }

    .is-refund {
      width: 144rpx;
    }
  }

  .order {
    margin-top: 16rpx;
    background: #FFFFFF;
    display: flex;
    flex: 1;
    padding: 0 24rpx;
    flex-direction: column;
    border-bottom: 2rpx solid #F5F5F5;

    ._title {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 20rpx 0;
      font-size: 28rpx;
      color: $uni-color-default;

      ._text {
        min-width: 120rpx;
        text-align: justify;
        text-align-last: justify;
        position: relative;
        margin-right: 20rpx;
      }

      ._text:after {
        content: ":";
        position: absolute;
        top: 50%;
        transform: translateY(-53%);
        right: -10rpx;
      }
    }

    ._title:first-child {
      padding-top: 40rpx;
    }

    ._title:last-child {
      padding-bottom: 40rpx;
    }
  }

  .service-subsidy {
    .service {
      display: flex;
      margin: 16rpx 0;
      background: #FFFFFF;
      align-items: center;

      .line {
        width: 2rpx;
        height: 120rpx;
        background: $uni-border-color;
      }

      ._item {
        width: 50%;

        ._btn {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          ._top {
            margin-left: 12rpx;
            text-align: left;
          }

          ._title {
            color: $uni-color-info;
            font-size: 24rpx;
            margin-top: 12rpx;
          }
        }
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 100rpx;
    background: #FFFFFF;
    padding: 18rpx 24rpx 18rpx 0;
    border-top: 2rpx solid #EBEDF0;
    margin-bottom: env(safe-area-inset-bottom);

    ._btn {
      width: 172rpx;
      margin-left: 8rpx;
    }
  }
}

.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}

.font-24 {
  font-size: 24rpx;
}

.font-32 {
  font-size: 32rpx;
}

._px36 {
  font-size: 36rpx;
}

.blod {
  font-weight: bold;
}
</style>
